<style scoped>
table {
  border-collapse: collapse;
}
table th,
td {
  border: 1px solid #e9eaec;
  margin: 0;
  padding: 4px 2px;
}
table tr {
  margin: 0;
}
    .colll{
        width: 110px;
    }

</style>
<template>
  <div>
    <table style="width:100%;">
      <tr style="border:1px solid #eee;">
        <th style="width: 40px;">抓取</th>
        <th class="colll">属性名</th>
        <th class="colll">单位</th>
        <th class="colll">属性类型</th>
        <th class="colll">属性类别</th>
        <th class="colll">数值类别</th>
        <th style="width: 200px;">
          <div style="display:flex;">
            <div style="flex:1;display:flex;align-items:center;justify-content:center;">上限值</div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center;">下线值</div>
          </div>
        </th>
        <th class="colll">地址码</th>
        <th class="colll">OPC变量</th>
        <th class="colll">数据长度</th>
        <th class="colll">数据类型</th>
        <th class="colll">寄存器数量</th>
        <th class="colll">指令</th>
        <th class="colll">等待时间(ms)</th>
        <th style="width: auto;">操作</th>
      </tr>
    </table>
    <div style="height: 550px;overflow-y: auto;">
    <table style="width:100%;table-layout: fixed">
      <tr v-for="(item,index) in collectionData" :key="index">
        <td style="width: 40px;text-align: center;">
          <Checkbox v-model="item.isGet" style="margin:0 auto;" :true-value="1" :false-value="0"></Checkbox>
        </td>
        <td class="colll">
          <Input v-model="item.name" placeholder="属性名"></Input>
        </td>
        <td class="colll">
          <Select v-model="item.unit" :transfer="true">
            <Option v-for="(ite,index) in units" :value="ite.name" :key="'unit'+index">{{ ite.name }}</Option>
          </Select>
        </td>
        <td class="colll">
          <Select v-model="item.type" :transfer="true">
            <Option v-for="(ite,index) in types" :value="ite.name" :key="'factory'+index">{{ ite.name }}
            </Option>
          </Select>
        </td>
        <td class="colll">
          <Select v-model="item.propertyType" :transfer="true">
            <Option v-for="(ite,index) in propertysTypes" :value="ite.value" :key="'factory'+index">{{ ite.name }}
            </Option>
          </Select>
        </td>
        <td class="colll">
          <Select v-model="item.valueType" :transfer="true">
            <Option v-for="(ite,index) in valuesTypes" :value="ite.value" :key="'factory'+index">{{ ite.name }}
            </Option>
          </Select>
        </td>
        <td style="width: 200px;">
          <div style="display:flex;">
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding-right:5px;">
              <Input v-model="item.warnUp" placeholder="上限值"></Input>
            </div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding-left:5px;">
              <Input v-model="item.warnDown" placeholder="下线值"></Input>
            </div>
          </div>
        </td>
        <td class="colll">
          <Input v-model="item.valueAddr" placeholder="地址码"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.valueAddrStr" placeholder="变量号"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.dataLen" placeholder="数据长度"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.dataType" placeholder="数据类型"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.saverNum" placeholder="寄存器数量"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.funCode" placeholder="指令"></Input>
        </td>
        <td class="colll">
          <Input v-model="item.waitTime" placeholder="等待时间(ms)"></Input>
        </td>
        <td style="width: auto;text-align: center">
          <Button type="error" @click.native="deleteOne(index)">删除</Button>
        </td>
      </tr>
    </table>
      <Row style="padding: 5px 10px;">
        <Button type="dashed" long @click="addOne">新增+</Button>
      </Row>
    </div>
    <Alert v-show="tipError" type="error" show-icon>{{tipError}}</Alert>
   </div>
</template>
<script>
export default {
  created: function () {
    this.loadUnits()
    this.loadPropertyTypes()
    this.loadNumberTypes()
    this.loadTypes()
  },
  props: {
    collectionData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data: function () {
    return {
      illegal: false,
      propertysTypes: [], // 属性类型选择
      valuesTypes: [], // 数值类型选择
      units: [], // 单位选择
      types: [], // 属性选择
      editOneData: {},
      // collectionData: [{
      //   isGet: 0,
      //   name: '电压',
      //   warnUp: '',
      //   warnDown: '',
      //   valueAddr: '',
      //   dataLen: ''
      // }],
      tipError: '',
      inputObj: {
        isGet: 0,
        name: '电压',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }
    }
  },
  methods: {
    handleSubmit: function () {
      // 验证是否都输入
      this.collectionData.forEach((item) => {
        for (let key in this.inputObj) {
          if (key === 'isGet') {
            continue
          }
          if (item[key] === undefined || item[key] === null || item[key] === '' || item[key].toString().trim() === '') {
            this.tipError = '请填写所有输入框！不能输入空格！'
            this.illegal = true
            return
          } else {
            item[key] = item[key].toString().trim()
            this.tipError = ''
          }
        }
      })
      if (this.illegal) {
        // 避免下次点击，还提示错误
        this.illegal = false
      } else {
        sessionStorage.typeDeviceCollection = true
        this.submitReady()
      }
    },
    handleReset: function () {
      console.log(123)
    },
    // 加载单位数据
    loadUnits: function () {
      let pageab = {
        size: 9999,
        page: 0,
        groupType_eq: 1005
      }
      window.myapi.dict_list(pageab).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.units = resp.data.data.content
        }
      }).finally(() => {
      })
    },
    // 加载属性数据
    loadTypes: function () {
      let pageab = {
        size: 9999,
        page: 0,
        groupType_eq: 1007
      }
      window.myapi.dict_list(pageab).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.types = resp.data.data.content
        }
      }).finally(() => {
      })
    },
    // 加载属性类别字典数据
    loadPropertyTypes: function () {
      let pageab = {
        size: 9999,
        page: 0,
        groupType_eq: 1004
      }
      window.myapi.dict_list(pageab).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.propertysTypes = resp.data.data.content
        }
      }).finally(() => {
      })
    },
    // 加载数值类别字典数据
    loadNumberTypes: function () {
      let pageab = {
        size: 9999,
        page: 0,
        groupType_eq: 1006
      }
      window.myapi.dict_list(pageab).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.valuesTypes = resp.data.data.content
        }
      }).finally(() => {
      })
    },
    addOne: function () {
      let obj = {
        isGet: 0,
        name: '',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }
      this.collectionData.push(obj)
    },
    deleteOne: function (index) {
      if (this.collectionData.length === 1) {}
      this.collectionData.splice(index, 1)
    },
    // 父 传数据进来
    updateFormdata: function (data) {
      this.editOneData = JSON.parse(JSON.stringify(data))
      if (this.editOneData.id !== undefined && this.editOneData.iotCollItems.length > 0) {
        this.collectionData = this.editOneData.iotCollItems
        // this.collectionData = JSON.parse(JSON.stringify(this.editOneData.iotCollItems))
        console.log(this.collectionData)
      } else {
        this.collectionData = []
      }
    }
  }
}

</script>
